<template>
	
	<view class="content">
		<view class="charts-box">
		  <qiun-data-charts 
		    type="bar"
		    :opts="opts"
		    :chartData="chartDataWealth"
		  />
			<view class="chart-title">
				<text class="name">财富值：</text>
				<text class="val">{{getShowVal('chartDataWealth')}}</text>
				<view class="tip">(物品价值估算，后续可以参与信用和资产评估)</view>
			</view>
		</view>
		
		<view class="charts-box">
		  <qiun-data-charts 
		    type="bar"
		    :opts="opts"
		    :chartData="chartDataGrowth"
		  />
			<view class="chart-title">
				<text class="name">成长值：</text>
				<text class="val">{{getShowVal('chartDataGrowth')}}</text>
				<view class="tip">(总消费金额，纳入积分系统，后续可以升级会员等级)</view>
			</view>
		</view>
		
		<view class="charts-box">
		  <qiun-data-charts 
		    type="bar"
		    :opts="opts"
		    :chartData="chartDataRank"
		  />
			<view class="chart-title">
				<text class="name">排行榜：</text>
				<text class="val">
				  {{`(当前排名${getShowVal('chartDataRank')}位，总参与人数${chartDataRank.series[0].data[0] + chartDataRank.series[1].data[0]})` }}
				</text>
				<view class="tip">(全国所有用户综合匿名排行，排行靠前者可以获得彰显身份的金银铜质龙殿令，
				享受协议单位的所有折扣优惠)</view>
			</view>
		</view>
		
	</view>

</template>

<script>
import * as api from '../../utils/api.js'
export default {
  data() {
    return {
      chartDataWealth: {
		  categories: ['财富值'],
		  series: [
		    {
		      name: "目标值",
		      data: [100]
		    },
		    {
		      name: "完成量",
		      data: [10000]
		    }
		  ]
	  }, // 财富值
	  chartDataGrowth: {
		  categories: ['成长值'],
		  series: [
		    {
		      name: "目标值",
		      data: [0]
		    },
		    {
		      name: "完成量",
		      data: [100]
		    }
		  ]  
	  }, // 成长值
	  chartDataRank: {
		  categories: ['排行榜'],
		  series: [
		    {
		      name: "目标值",
		      data: [0]
		    },
		    {
		      name: "完成量",
		      data: [1000]
		    }
		  ]
		  
	  },  // 排名榜
      //您可以通过修改 config-ucharts.js 文件中下标为 ['bar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: ["#FFD700","#000","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [15,30,0,5],
        enableScroll: false,
		fontColor: 'white',
		dataLabel: false,
		fontSize: 20,
        legend: { show: false },
        xAxis: {
		  disabled: true,
          boundaryGap: "justify",
          disableGrid: true,
          axisLine: false,
        },
        yAxis: {
			disableGrid: true,
		},
        extra: {
          bar: {
            type: "stack",
            width: 30,
            meterBorde: 1,
            meterFillColor: "#FFFFFF",
            activeBgColor: "#000000",
          }
        }
      }
    };
  },
  onReady() {
    this.getServerData();
  },
  methods: {
	getShowVal (flag) {
		return this[flag].series[0].data[0]
	}, 
	buildData (categories = ["2018"], data1 =  [35], all = [18] ) {
		const res = {
		    categories: categories,
		    series: [
		      {
		        name: "目标值",
		        data: data1
		      },
		      {
		        name: "完成量",
		        data: all
		      }
		    ]
		  };
		return res
	},
    async getServerData() {
        const res = await api.getPrivateData();
		const data = res?.data || {};
        this.chartDataWealth = this.buildData(['财富值'], [data.wealth], [data.wealthTotal - data.wealth]);
        this.chartDataGrowth = this.buildData(['成长值'], [data.growth], [data.growthTotal - data.growth]);
		this.chartDataRank = this.buildData(['排行榜'], [data.currentRank], [data.totalParticipateNum - data.currentRank]);
    },
  }
};
</script>

<style  lang="scss" scoped>
  .content {
	  color: white;
	  .charts-box {
	    width: 100%;
	    height: 200rpx;
		margin-bottom: 60rpx;
		.chart-title {
			margin-top: 20rpx;
			font-size: 28rpx;
			text-align: center;
			
			.tip {
				padding: 0 40rpx;
				font-size: 20rpx;
				color: red;
			}
		}
	  }
  }
  
</style>